import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:yp/config/config.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';

import 'logic.dart';
import 'state.dart';

class NearbyBusinessHallPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _NearbyBusinessHallPage();
  }
}

class _NearbyBusinessHallPage extends State<NearbyBusinessHallPage> {
  final NearbyBusinessHallLogic logic = Get.put(NearbyBusinessHallLogic());
  final NearbyBusinessHallState state =
      Get.find<NearbyBusinessHallLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: setWidth(1),
        backgroundColor: Colors.white,
        title: Text(
          '附近营业厅',
          style: TextStyle(
            color: Color(0xff030303),
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff333333),
        ),
      ),
      body: GetBuilder<NearbyBusinessHallLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xffF5F5F5),
            child: !state.searchBool
                ? ListView.separated(
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      if (index == 0) {
                        return _firstItemWidget();
                      } else {
                        var data = state.selfHelpAddressList[index - 1];
                        return _itemWidget(data: data);
                      }
                    },
                    separatorBuilder: (context, index) {
                      return SizedBox(
                        height: 0,
                      );
                    },
                    itemCount: state.selfHelpAddressList.length + 1,
                  )
                : ListView.separated(
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      if (index == 0) {
                        return _firstCancelWidget();
                      } else {
                        var data = state.selfHelpAddressList[index - 1];
                        return _itemWidget(data: data);
                      }
                    },
                    separatorBuilder: (context, index) {
                      return SizedBox(
                        height: 0,
                      );
                    },
                    itemCount: state.selfHelpAddressList.length + 1,
                  ),
          );
        },
      ),
    );
  }

  // first item
  Widget _firstItemWidget() {
    return Container(
      padding: EdgeInsets.symmetric(
        horizontal: setWidth(30),
        vertical: setWidth(32),
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(
            color: Color(0xffF5F5F5),
            width: setWidth(2),
          ),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          InkWell(
            onTap: () {
              print('++++++ 搜索附近营业厅点击事件 ++++++');
              state.searchBool = true;
              logic.update();
            },
            child: Container(
              height: setWidth(56),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(28)),
                border: Border.all(
                  color: Color(0xffebebeb),
                  width: setWidth(2),
                ),
              ),
              child: Row(
                children: [
                  Container(
                    height: setWidth(56),
                    width: setWidth(58),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(setWidth(28)),
                        bottomLeft: Radius.circular(setWidth(28)),
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Icon(
                      Icons.search_rounded,
                      size: setWidth(24),
                      color: Color(0xffcccccc),
                    ),
                  ),
                  Expanded(
                    child: Text(
                      '搜索附近营业厅',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Color(0xffcccccc),
                        fontSize: 14,
                      ),
                    ),
                  ),
                  Container(
                    height: setWidth(56),
                    width: setWidth(30),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(setWidth(28)),
                        bottomRight: Radius.circular(setWidth(28)),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: setWidth(34),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.asset(
                'assets/images/locationIcon.png',
                width: setWidth(20),
                height: setWidth(28),
                color: Config.mainColor,
                fit: BoxFit.cover,
              ),
              SizedBox(
                width: setWidth(10),
              ),
              Expanded(
                child: Text(
                  (state.adr ?? '') + ' 附近',
                  style: TextStyle(
                    color: Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: setWidth(10),
          ),
          _noDataWidget(),
        ],
      ),
    );
  }

  // item
  Widget _itemWidget({Map data}) {
    return InkWell(
      onTap: () {
        print('********** searchBool=(false 附近营业厅, true 搜索营业厅)'
            '  (state.searchBool = ${state.searchBool}),');
        Get.toNamed(RouteConfig.businessHallDetails, arguments: data);
      },
      child: Container(
        padding: EdgeInsets.only(
          left: setWidth(30),
          top: setWidth(35),
          right: setWidth(20),
          bottom: setWidth(50),
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              color: Color(0xffF5F5F5),
              width: setWidth(2),
            ),
          ),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            data['shop_photo'] == null
                ? SizedBox(
                    width: setWidth(120),
                    height: setWidth(120),
                  )
                : Image.network(
                    data['shop_photo'],
                    width: setWidth(120),
                    height: setWidth(120),
                    fit: BoxFit.cover,
                  ),
            SizedBox(
              width: setWidth(20),
            ),
            Expanded(
              child: Container(
                height: setWidth(130),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: setWidth(400),
                                minWidth: setWidth(60),
                              ),
                              child: Text(
                                data['sub_unit_name'],
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                            SizedBox(
                              width: setWidth(16),
                            ),
                            Column(
                              children: [
                                SizedBox(
                                  height: setWidth(6),
                                ),
                                ConstrainedBox(
                                  constraints: BoxConstraints(
                                    maxWidth: setWidth(300),
                                    minWidth: setWidth(10),
                                  ),
                                  child: Text(
                                    "${(double.parse(data['distance'].toString()) * 0.01).toStringAsFixed(2)}${data['unit']}",
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                      color: Color(0xff666666),
                                      fontSize: 12,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                        InkWell(
                          onTap: () {
                            print('打电话 ====== 点击事件！！！');
                            String telephone = data['telephone'];
                            if (telephone == null) {
                              return;
                            }
                            launch('tel://' + telephone);
                          },
                          child: Container(
                              height: setWidth(40),
                              width: setWidth(40),
                              alignment: Alignment.bottomRight,
                              child: Icon(
                                Icons.phone,
                                size: setWidth(40),
                                color: Colors.green,
                              )),
                        ),
                      ],
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                          height: setWidth(28),
                          padding:
                              EdgeInsets.symmetric(horizontal: setWidth(8)),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(setWidth(4)),
                            border: Border.all(
                              color: Color(0xfff3405d),
                              width: setWidth(1),
                            ),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '营业时间: ' + data['business_hours'],
                            style: TextStyle(
                              color: Color(0xffF3405D),
                              fontSize: 10,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Text(
                            data['city_name'] + data['adr'],
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              color: Color(0xff717171),
                              fontSize: 12,
                            ),
                          ),
                        ),
                        SizedBox(
                          width: setWidth(20),
                        ),
                        InkWell(
                          onTap: () {
                            if (kIsWeb) {
                              toast("请至应用市场下载“壹品慧”APP或微信搜索“壹品慧”小程序使用该功能。");
                              return;
                            }
                            Get.toNamed(RouteConfig.hallMap, arguments: data);
                          },
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/images/navigation_image.png',
                                width: setWidth(24),
                                height: setWidth(32),
                                fit: BoxFit.cover,
                              ),
                              Text(
                                ' 去这里',
                                style: TextStyle(
                                  color: Color(0xffea5504),
                                  fontSize: 12,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _noDataWidget() {
    return Visibility(
        visible: state.selfHelpAddressList.length == 0,
        child: Text('当前位置没有营业厅',
            style:
                TextStyle(color: Color(0xff222222), fontSize: setWidth(26))));
  }

  // first 取消
  Widget _firstCancelWidget() {
    return Container(
        padding: EdgeInsets.only(
          left: setWidth(30),
          top: setWidth(28),
          right: setWidth(30),
          bottom: setWidth(16),
        ),
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  width: setWidth(600),
                  height: setWidth(56),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(setWidth(28)),
                    border: Border.all(
                      width: setWidth(1),
                      color: Color(0xffea5504),
                    ),
                  ),
                  child: Row(
                    children: [
                      Container(
                        height: setWidth(56),
                        width: setWidth(58),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(setWidth(28)),
                            bottomLeft: Radius.circular(setWidth(28)),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: Icon(
                          Icons.search_rounded,
                          size: setWidth(24),
                          color: Color(0xffcccccc),
                        ),
                      ),
                      Expanded(
                        child: TextField(
                          controller: state.contentTextController,
                          focusNode: state.contentFocusNode,
                          maxLines: 1,
                          onSubmitted: (str) {
                            logic.onSearchClick(true);
                          },
                          onChanged: (_) {
                            logic.onSearchClick(true);
                          },
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 14,
                          ),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.all(0),
                            hintText: '搜索附近营业厅',
                            hintStyle: TextStyle(
                              color: Color(0xffcccccc),
                              fontSize: 14,
                            ),
                            enabledBorder: OutlineInputBorder(
                              // 设置输入框可编辑时的边框样式
                              borderRadius: BorderRadius.all(
                                  Radius.circular(0)), // 设置边框四个角的弧度
                              borderSide: BorderSide(
                                // 用来配置边框的样式
                                color: Colors.transparent, // 设置边框的颜色
                                width: setWidth(1), // 设置边框的粗细
                              ),
                            ),
                            focusedBorder: OutlineInputBorder(
                              // 用来配置输入框获取焦点时的颜色
                              borderRadius: BorderRadius.all(
                                  Radius.circular(0)), // 设置边框四个角的弧度
                              borderSide: BorderSide(
                                // 用来配置边框的样式
                                color: Colors.transparent, // 设置边框的颜色
                                width: setWidth(1), // 设置边框的粗细
                              ),
                            ),
                          ),
                        ),
                      ),
                      Container(
                        width: setWidth(28),
                        height: setWidth(56),
                      ),
                    ],
                  ),
                ),
                InkWell(
                  onTap: () {
                    print('=========== ！取消点击事件！===========');
                    state.contentTextController.text = '';
                    logic.onSearchClick(false);
                  },
                  child: Container(
                    width: setWidth(90),
                    height: setWidth(56),
                    alignment: Alignment.centerRight,
                    child: Text(
                      '取消',
                      style: TextStyle(
                        color: Color(0xff666666),
                        fontSize: 14,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Visibility(
                visible: state.selfHelpAddressList.length == 0,
                child: SizedBox(
                  height: setWidth(10),
                )),
            _noDataWidget(),
          ],
        ));
  }
}
